import { Component } from 'react';
import { View, Swiper, SwiperItem, Image } from '@tarojs/components'
import navigationTo from '@/utils/command'
import './index.scss'

interface Props {
  imageInfo: {
    url: string
    command: ICommand
  }[]
}

interface State {
  autoplay?: boolean | undefined
}

// 轮播图与视频视图
export default class Index extends Component<Props, State> {
  constructor (props) {
    super(props)
    this.state = {
      autoplay: true,
      // swiperIndex: 0
    }
  }

  tabSwiper(t: string) {
    if (t === 'video') {
      this.setState({
        autoplay: false
      })
    } else {
      this.setState({
        autoplay: true
      })
    }
  }
  static options = {
    addGlobalClass: true
  }

  render() {
    const { autoplay } = this.state
    const { imageInfo } = this.props
    return imageInfo ? (
      <View className='swiper-wrap'>
        <Swiper
          className='goods-details-swiper'
          indicatorColor='#C7C7C7'
          indicatorActiveColor='#FFFFFF'
          circular
          indicatorDots
          autoplay={autoplay}
        >
          {
            imageInfo.map(img => {
              return (
                <SwiperItem key={img.url}>
                  <Image
                    mode='widthFix'
                    onClick={() => {
                      navigationTo(img.command)
                    }}
                    className='swiper-img'
                    src={img.url}
                    style='width: 100%'
                  />
                </SwiperItem>
              )
            })
          }
        </Swiper>
      </View>
    ) : null
  }
}
